<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./finger/fingerprint.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>信息登记</title>
</head>
<body>
<div id="app">
    <section class="Title">{{ remote.housing_name }}-防控信息登记</section>
    <section id="application">
        <div class="content-wrap">
            <cube-form
                    :model="model"
                    :schema="schema"
                    :immediate-validate="false"
                    :options="options"
                    @validate="validateHandler"
                    @submit="submitHandler"
                    @reset="resetHandler"></cube-form>
        </div>
    </section>
    <section class="Copyright">
        <p><a href="https://gitee.com/developer-dishy/OpenFangKongDengJi">软件声明</a></p>
        <br>
        <p>Copyright&copy;2020<a href="mailto:devDishy@163.com"><b> ZhuDingSheng </b></a> All Rights Reserved.</p>
    </section>

</div>

</body>
<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data() {
                return {
                    remote: {
                        housing_name: '位置区域'
                    },
                    fingerid: undefined,
                    validity: {},
                    valid: undefined,
                    model: {
                        name: '',
                        phone: '',
                        idcard: '',
                        housing_name: '',
                        address: '',
                        type: '',
                        company_name: '',
                        temperature: '',
                        car_number: '',
                        direction: '',
                        commit: '',
                        is_autonomous_region_migrants: '',
                        is_city_region_migrants: '',
                        from_area_name: '',
                        back_date: '',
                        have_car: '',
                        sex: '',
                        is_family_temperature_normal: '',
                        family_count: '',
                        fk_uuid: '',
                        fingerid: undefined,
                        force_commit: ''
                    },
                    schema: {
                        groups: [
                            {
                                legend: '请填写防控信息（如表单显示过长，点住字段侧拖动即可）',
                                fields: [
                                    {
                                        type: 'input',
                                        modelKey: 'name',
                                        label: '姓名',
                                        props: {
                                            placeholder: '请输入您的姓名'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'phone',
                                        label: '电话',
                                        props: {
                                            placeholder: '请输入您的联系方式'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'idcard',
                                        label: '身份证号码',
                                        props: {
                                            placeholder: '请输入您的身份证号码'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'sex',
                                        label: '性别',
                                        props: {
                                            placeholder: '您的性别',
                                            options: ['男', '女']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },

                                    {
                                        type: 'input',
                                        modelKey: 'housing_name',
                                        label: '所在区域',
                                        props: {
                                            placeholder: '请输入您当前所在区域'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'address',
                                        label: '住址',
                                        props: {
                                            placeholder: '请输入您的家庭住址'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'company_name',
                                        label: '工作单位',
                                        props: {
                                            placeholder: '请输入您的工作单位'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'type',
                                        label: '住户类型',
                                        props: {
                                            placeholder: '请选择住户类型',
                                            options: ['业主', '亲属住户', '租赁住户', '亲友来访', '常驻人员（如保姆，月嫂等）', '其他']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },


                                    {
                                        type: 'input',
                                        modelKey: 'temperature',
                                        label: '体温',
                                        props: {
                                            placeholder: '请输入您的体温'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'is_family_temperature_normal',
                                        label: '家属是否正常',
                                        props: {
                                            placeholder: '家属是否有发烧等现象？',
                                            options: ['是', '否']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'family_count',
                                        label: '家庭成员数量',
                                        props: {
                                            placeholder: '请填写家庭成员数量？'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'have_car',
                                        label: '是否驾车',
                                        props: {
                                            placeholder: '是否驾驶车辆',
                                            options: ['是', '否']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'car_number',
                                        label: '车牌号',
                                        props: {
                                            placeholder: '请输入您的车牌号'
                                        },
                                        rules: {
                                            // required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'direction',
                                        label: '出入方向',
                                        props: {
                                            placeholder: '请选择您的出入方向',
                                            options: ['出', '入']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'is_autonomous_region_migrants',
                                        label: '省外归来',
                                        props: {
                                            placeholder: '是否为省外归来人员',
                                            options: ['是', '否']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'select',
                                        modelKey: 'is_city_region_migrants',
                                        label: '盟外归来',
                                        props: {
                                            placeholder: '是否为盟外归来人员',
                                            options: ['是', '否']
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'from_area_name',
                                        label: '归来地',
                                        props: {
                                            placeholder: '归来地（没有请填无）'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'back_date',
                                        label: '归来时间',
                                        props: {
                                            placeholder: '归来时间（没有请填无）'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'textarea',
                                        modelKey: 'commit',
                                        label: '说明',
                                        props: {
                                            placeholder: '填写备注说明',

                                        },
                                        rules: {
                                            // required: true
                                        },
                                        trigger: 'blur'
                                    },
                                ]
                            },
                            {
                                fields: [
                                    {
                                        type: 'submit',
                                        label: '提交防控登记信息'
                                    },
                                    {
                                        type: 'reset',
                                        label: '重新输入'
                                    }
                                ]
                            }
                        ]
                    },
                    options: {
                        scrollToInvalidField: true,
                        layout: 'standard' // classic fresh
                    }
                }
            },
            methods: {
                getQueryVariable(variable) {
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split("=");
                        if (pair[0] == variable) {
                            return pair[1];
                        }
                    }
                    return (false);
                },
                submitHandler(e) {
                    e.preventDefault()
                    console.log('submit', this.model)
                    axios.post('/server/api/Dj/check_in', this.model).then(res => {
                        if (res.data.status) {
                            this.$createToast({
                                time: 0,
                                txt: res.data.msg,
                                mask: true, type: 'txt'
                            }).show()
                        } else {
                            this.$createDialog({
                                type: 'confirm',
                                icon: 'cubeic-alert',
                                title: '警告',
                                content: res.data.msg,
                                confirmBtn: {
                                    text: '强行外出',
                                    active: true,
                                    disabled: false,
                                    href: 'javascript:;'
                                },
                                cancelBtn: {
                                    text: '不出去了',
                                    active: true,
                                    disabled: false,
                                    href: 'javascript:;'
                                },
                                onConfirm: () => {
                                    this.$createDialog({
                                        type: 'prompt',
                                        title: '强行外出原因',
                                        prompt: {
                                            value: '',
                                            placeholder: '请填写强行外出原因'
                                        },
                                        onConfirm: (e, promptValue) => {
                                            //强行外出
                                            res.data.data.force_commit = promptValue;
                                            axios.post('/server/api/Dj/force_check_in', res.data.data).then(fres => {
                                                if (fres.data.status) {
                                                    this.$createToast({
                                                        time: 0,
                                                        txt: fres.data.msg,
                                                        mask: true, type: 'txt'
                                                    }).show()
                                                }
                                            })
                                        }
                                    }).show()
                                },
                                onCancel: () => {
                                    //todo 选择在家呆着后要做的事儿
                                }
                            }).show()
                        }
                    })
                },
                validateHandler(result) {
                    this.validity = result.validity
                    this.valid = result.valid
                    //  console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
                },
                resetHandler(e) {
                    //    console.log('reset', e)
                }
            },
            mounted: function () {
                let fk_uuid = this.getQueryVariable('fk_uuid');
                this.model.fingerid = this.fingerid = new Fingerprint({screen_resolution: true}).get();
                if (fk_uuid) {
                    this.model.fk_uuid = fk_uuid;
                    axios.post('/server/api/Dj/fetch_housing_name', {fk_uuid: fk_uuid}).then(res => {
                        if (res.data.status) {
                            this.remote.housing_name = this.model.housing_name = res.data.data.housing_name
                        }
                    })
                    axios.post('/server/api/Dj/dj_init', {fk_uuid: fk_uuid, fingerid: this.fingerid}).then(res => {
                        if (res.data.status) {
                            this.model = res.data.data
                            res.data.data.temperature = ''
                            res.data.data.is_family_temperature_normal = ''
                            this.model.direction = res.data.data.direction == '出' ? '入' : '出';
                        }
                    });
                }
            }
        })
    }()

</script>
<style>
    #app {
        height: 100%
    }

    #application {
        padding-left: 1vh;
        padding-right: 1vh;
        width: 95%;
        margin: auto;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
    }

    .content-wrap {
        width: 100%;
        height: 75%;
        overflow: auto;
        background-color: #fff;
    }
</style>
</html>